<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>创建和删除DOM元素</title>
	</head>
	<body>
		<div id="box">
			<span id="span1" style="color: red;">hello</span>
			创建和删除DOM元素
		</div>
		
		<input type="button" value="创建元素" onclick="click1()" />
		<input type="button" value="删除元素" onclick="click2()" />
		<script type="text/javascript">
			function click1(){
				//1创建元素img
				var img1=document.createElement("img");
				//2给元素属性赋值
				img1.src="img/01.jpg";
				img1.alt="图片";
				img1.style.width="100px";
				//3把元素加入dom中
				//appendChild()
				//document.getElementById("box").appendChild(img1);
				//insertBefore()
				var span1=document.getElementById("span1");
				document.getElementById("box").insertBefore(img1,span1);

			}
			
			
			function click2(){
				var span1=document.getElementById("span1");
				//1获取父节点，再调用removeChild(子元素);
				//span1.parentNode.removeChild(span1);
				//2直接删除
				span1.remove();
			}
		</script>
	</body>
</html>
